{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div class="wh100-100 pos-r bdso ripple" :style="'background-image: url('+ picUrl(product.cover) + ');background-size: cover;'">
        <div class="pos-a w100 t0 l0 0 flrc c13 bca03">
            <div class="pad5 pos-r fs14">
                <span class="fa fa-angle-left padl5 padr10 op9"></span>
                <mu-ripple @click="goback()"></mu-ripple>
            </div>
            <div class="flex1">&nbsp;</div>

            <div class="pad5 pos-r fs12" v-if="from != 'shop'">
                <span class="fa fa-heart-o op9"></span>
                <mu-ripple @click="goback()"></mu-ripple>
            </div>
            <div class="pad5 pos-r fs12" v-if="from != 'shop'">
                <span class="fa fa-share-alt op9 padr10"></span>
                <mu-ripple @click="goback()"></mu-ripple>
            </div>
        </div>
    </div>
    <div class="pad10 lh2">
        <div class="fs12 fwb c11">[[product.name]]</div>
        <div class="c12">[[product.subTitle]]</div>
        <div class="flrc">
            <div class="flex1">
                <span class="c1 fs12">￥[[product.price]]</span>
                <span class="c12"> / [[product.unit]]</span>
            </div>
            <div class="c12 fs8">[[!isTrue(product.statistic)?0:product.statistic.view]]次浏览</div>
        </div>
        <div class="bdtdo flex-r flex-start lh2 padt8 fs8">
            <div class="padr5">保障</div>

{#            <span class="padl5 padr5 padt3 padb2 round2 mar3 bc3 c11" v-for="tag in product.shop.tags">[[tag.showName]]</span>#}
            <div class="padr5"><span class="fa fa-check-circle c01" v-for="tag in product.shop.tags">[[tag.showName]]</span></div>
{#            <div class="padr5"><span class="fa fa-check-circle c01">企业认证</span></div>#}
{#            <div class="padr5"><span class="fa fa-check-circle c01">保证金</span></div>#}
{#            <div class="padr5"><span class="fa fa-check-circle c01">金牌</span></div>#}
        </div>
    </div>
    <div class="pad10 bdtso bdw10 bdc13 flrc ofe pos-r">
        <mu-ripple @click="goto('shopIndex',{id:product.shop.id})"></mu-ripple>
        <div class="wh15-15 round">
             <img class="wh15-15 round" :src="picUrl(product.shop.logo)" alt="" onerror="this.src=pic404">
        </div>
        {#<div class="padl5 ofe fs10 fs14 op4">#}
            {#<span class="fa fa-home c12"></span>#}
        {#</div>#}
        <div class="flex1 padl5 ofe fs10">
            <span class="">[[product.shop.name]]</span>
        </div>
        <div class="pad5 pos-r fs14 c12">
            <span class="fa fa-angle-right op9"></span>
        </div>
    </div>
    <div class="pad10 bdtso bdw10 bdc13 flrc ofe">
        <div class=" flrc flex1 c12 pos-r ofe">
            <span class="fs9 fa fa-map-marker padb2"></span>
            <span class="pad3 flex1 ofe">[[product.shop.address]]</span>
            <mu-ripple @click="baiduditu(product.shop.lat,product.shop.lon)"></mu-ripple>
        </div>
        <div class="fs14 c1 op6">
            <span @click="call(product.shop.phone)" class="fa fa-phone-square"></span>
        </div>
    </div>
    <div class="bdtso bdw10 bdc13">
        <div class="lh2 bdbso fs10 fwb padl10 padt5 padb5">服务详情</div>
        <div class="pad10">
            [[product.intro]]
        </div>
        <div>
             <img class="w100" :src="picUrl(item)" alt="" v-for="item in product.pics" onerror="this.src=pic404">
        </div>
    </div>
    <div class="bdtso bdw5 bdc13">
        <div class="lh2 bdbso padl10 padt5 padb5">用户评价</div>
        <div v-for="item in comments">
            {% include "ApiCloud/Base/inc.comment.list.base.html.twig" %}
        </div>
    </div>
    <div class="bc13 c13 pad20" v-if="from != 'shop'">
        this is the end
    </div>
    <div class="pos-f b0 l0 r0 bcf flrc flex-fill bdtso" v-if="from != 'shop'">
        <div class="flex3 padl10 c1 fs12">
            ￥ [[product.price]]
        </div>
        <div class="flex1 bc2 c13 flcc pad8 pos-r">
            下单支付
            <mu-ripple  @click="goto('serviceCreateOrder',{id:product.id,product:product})"></mu-ripple>
        </div>
    </div>

{% endblock %}

{% block myJs %}
    <script src="{{ root }}/js/map.js{{ rnd }}"></script>
{% endblock %}
